<template>
  <el-container>
    <el-main>
      <el-row type="flex" justify="center">
        <el-col :span="22">
          <el-card class="box-card3" shadow="always">
            <div slot="header" class="clearfix">
              <span style="float: left"><b>用户列表</b></span>
            </div>
            <el-table
              :data="tableData"
              highlight-current-row
              border
              max-height="800"
              style="border-radius: 10px"
              :row-class-name="tableRowClassName"
            >
              <el-table-column prop="id" label="ID"> </el-table-column>
              <el-table-column prop="username" label="username">
              </el-table-column>
              <el-table-column prop="mail" label="mail"> </el-table-column>
              <el-table-column prop="phonenumber" label="phonenumber">
              </el-table-column>
              <el-table-column prop="status" label="status"> </el-table-column>
            </el-table>
            <el-pagination background layout="prev, pager, next" :total="1000" style="margin-top:30px;">
            </el-pagination>
          </el-card>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
import ExportExcel from "../../components/ExportExcel.vue";
export default {
  components: {
    ExportExcel,
  },
  data() {
    return {
      addInfo: {},
      tableData: [
        {
          id: "00002",
          username: "王小虎",
          mail: "上海市普陀区金沙江路 1518 弄",
          phonenumber: "1010101010",
          status: "已婚",
        },
        {
          id: "00002",
          username: "王小虎",
          mail: "上海市普陀区金沙江路 1518 弄",
          phonenumber: "1010101010",
          status: "已婚",
        },
        {
          id: "00002",
          username: "王小虎",
          mail: "上海市普陀区金沙江路 1518 弄",
          phonenumber: "1010101010",
          status: "已婚",
        },
        {
          id: "00002",
          username: "王小虎",
          mail: "上海市普陀区金沙江路 1518 弄",
          phonenumber: "1010101010",
          status: "已婚",
        },
      ],
    };
  },
  mounted() {},

  methods: {},
};
</script>

<style scoped>
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}

.el-row {
  margin-bottom: 20px;
}
.box-card3 {
  width: 78vw;
  border-radius: 20px;
  /* margin-top: 15px;
  margin-bottom: 15px; */
  margin: 15px auto;
}
</style>